<template>
  <div>
    <!-- <AInput v-model="inputValue" /> -->
    <AInput @input="handleInput" />
    <div>{{ inputValue }} --> lastLetter {{ inputValueLastLetter }}</div>
    <!-- <AShow :content="inputValue" /> -->
    <p>appName: {{ appName }}</p>
    <!-- <p>appNameWithVersion: {{ appNameWithVersion }}</p> -->
    <p>userName: {{ userName }}</p>
    <!-- <p>userNameFirstLetter: {{ userNameFirstLetter }}</p> -->
    <button @click="handleNewAppName">修改AppName</button>
    <p>appVersion: {{ appVersion }}</p>
    <button @click="handleNewUserName">修改userName</button>
    <button @click="handleActionAppName">异步修改appName</button>
    <button @click="registerModule">动态注册模块</button>
    <ul>
      <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>
<script>
import AInput from '_c/AInput.vue'
import AShow from '_c/AShow.vue'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// 命名空间
// import { createNamespacedHelpers } from 'vuex'
// const { mapState } = createNamespacedHelpers('user')

export default {
  name: 'store',
  components: {
    AInput,
    AShow
  },
  data () {
    return {
      inputValue: ''
    }
  },
  computed: {
    // appName () {
    //   return this.$store.state.appName
    // },
    // userName () {
    //   return this.$store.state.user.userName
    // }
    // ...mapState([
    //   'appName'
    // ])
    ...mapState({
      appName: state => state.appName,
      userName: state => state.user.userName,
      appVersion: state => state.appVersion,
      // todoList: state => state.todo ? state.todo.todoList : []
      todoList: state => state.user.todo ? state.user.todo.todoList : []
    }),
    // 命名空间
    // ...mapState({
    //   userName: state => state.userName
    // }),
    inputValueLastLetter () {
      return this.inputValue.substr(-1, 1)
    },
    // appNameWithVersion () {
    //   return this.$store.getters.appNameWithVersion
    // }
    // ...mapGetters([
    //   'appNameWithVersion'
    // ])
    ...mapGetters('user',[
      'userNameFirstLetter'
    ])
  },
  mounted () {
    // console.log(this.$store.state)
  },
  methods: {
    ...mapMutations([
      'SET_NEWAPPNAME',
      'SET_USER_NAME'
    ]),
    ...mapActions([
      'updateAppName'
    ]),
    handleInput (val) {
      this.inputValue = val
    },
    handleNewAppName () {
      // this.$store.commit('SET_NEWAPPNAME', 'vue-learn1.0')
      // this.$store.commit('SET_NEWAPPNAME', {
      //   appName: 'vue-learn1.0'
      // })
      // this.$store.commit({
      //   type: 'SET_NEWAPPNAME',
      //   appName: 'vue-learn1.0'
      // })
      // this.$store.commit('SET_APP_VERSION')
      // ...mapMutations
      this.SET_NEWAPPNAME('newAppName')
    },
    handleNewUserName () {
      this.SET_USER_NAME('SangFall5')
    },
    handleActionAppName () {
      // this.updateAppName()
      this.$store.dispatch('updateAppName')
    },
    registerModule () {
      // this.$store.registerModule('todo', {
      //   state: {
      //     'todoList': [
      //       '学习Mutations',
      //       '学习Actions'
      //     ]
      //   }
      // })
      this.$store.registerModule(['user', 'todo'], {
        state: {
          'todoList': [
            '学习Mutations',
            '学习Actions'
          ]
        }
      })
    }
  }
}
</script>
